<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #map{
      position: relative;
      width: 400px;
      height: 400px;
      background: #000;
    }
  </style>
</head>
<body>
  <h1 id="grade">0分</h1>
  <div id="map"></div>
  <script type="module">
    import Game from './Game.js'
    window.onload = function () {

      let map = document.querySelector('#map');
      let game = new Game(map, 12);

      document.onclick = function(){
        game.start();
      }

      // 自定义控制器
      // game.addControl(function(){
      //   window.addEventListener('keydown', function({keyCode}){
      //     switch (keyCode) {
      //       case 65:
      //         this.snake.changeDir('left');
      //         break;
      //       case 87:
      //         this.snake.changeDir('top');
      //         break;
      //       case 68:
      //         this.snake.changeDir('right');
      //         break;
      //       case 83:
      //         this.snake.changeDir('bottom');
      //         break;
      //     }
      //   }.bind(this))
      // })

      // game.toGrade = function(grade){
      //   document.getElementById('grade').innerHTML = grade + '分';
      // }
      game.on('changeGrade', function(val){
        document.getElementById('grade').innerHTML = val + '分';
      })

      game.toOver = function(){
        alert('游戏结束！');
      }

      game.toWin = function(){
        alert('恭喜你！通关了');
      }
    }
  </script>
</body>
</html>